<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
        <el-tabs v-model="active" @tab-click="handleClick">
            <el-tab-pane v-for="x in comName" :key="x" :label="x" :name="x">{{x}}</el-tab-pane>
        </el-tabs>
        <!-- 设置保活随意切换之前填写的数据还存在（缓存） -->
        <keep-alive>
            <div :is="active"></div>
        </keep-alive>
    </div>
</template>

<script>
    // import HelloWorld from './components/HelloWorld.vue'
    //import father from "@/components/father";
    import slot_test from "@/views/vue_base_test/slot_test/father"; //slot_test
    import computed_test from "@/views/vue_base_test/computed_test/father"; //computed_test
    import watch_test from "@/views/vue_base_test/watch_test/father"; //watch_test
    import for_test1_father from "@/views/vue_base_test/for_test/for_test1/for_test1_father"; //for_test1_father
    import sync_test from "@/views/vue_base_test/sync_test/father"; //sync_test
    import test from "@/views/vue_base_test/select_linkage_test/test"; //select_linkage_test
    import slot_prop_test from "@/views/vue_base_test/slot_test/slot_prop_test/father"; //slot_prop_test
    import axios_test from "@/views/axios_test/father"; //axios_test
    import el_menu_tree_test from "@/views/element_ui_test/el_menu_tree_test/father"; //el_menu_tree_test
    import el_tree_test from "@/views/element_ui_test/el_tree_test/father"; //el_tree_test
    export default {
        name: 'App',
        components: {
            // HelloWorld
            slot_test,
            computed_test,
            watch_test,
            for_test1_father,
            sync_test,
            test,
            slot_prop_test,
            axios_test,
            el_menu_tree_test,
            el_tree_test
        },
        data() {
            return {
                active: 'slot_test',
                comName: [
                    'slot_test',
                    'computed_test',
                    'watch_test',
                    'for_test1_father',
                    'sync_test',
                    'test',
                    'slot_prop_test',
                    'axios_test',
                    'el_menu_tree_test',
                    'el_tree_test'
                ]
            }
        },
        created() {

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event)
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
